<template>
  <div class="appraise-list">
    <BackNavigation v-bind:title-info="titleInfo"/>
    <ul v-if="appraiseList.length">
      <li v-for="item in appraiseList">
        <AppraiseCellVue v-bind:appraise-item="item" v-on:appraise-click="appraiseClick"/>
      </li>
    </ul>
    <p v-if="!nullShow">{{ isLoading ? '加载中...' : '没有更多了...' }}</p>
    <NoDataVue v-bind:vue-info="noDataInfo" v-if="nullShow"/>
  </div>
</template>

<script>
  import * as recommend from 'api/recommend'
  import BackNavigation from '../mine/navigation.vue'
  import NoDataVue from '../mine/no_data.vue'
  import { get_cookie } from 'assets/cookie/cookie'
  import AppraiseCellVue from './appraise_cell.vue'

  export default {
    name: 'appraise_list',
    components: {
      BackNavigation,
      NoDataVue,
      AppraiseCellVue
    },
    data () {
      return {
        isLoading: true,
        isMore: false,
        appraiseList: {
          type: Array,
          default: []
        },
        nullShow: false,
        titleInfo: {
          leftTitle: '返回',
          title: '待评价',
          rightTitle: ''
        },
        noDataInfo: {
          title: '没有数据啊',
          iconUrl: '../../assets/img/common/no_data.png'
        }
      }
    },
    methods: {
      getNullShow () {
        if (!this.nullShow) {
          return false
        } else {
          if (this.appraiseList == null || this.appraiseList == undefined || this.appraiseList.length == 0) {
            return true
          } else {
            return false
          }
        }
      },
      appraiseClick (appraiseItem) {
        console.log(123456)
        console.log(appraiseItem)
        if (!appraiseItem.isAppraise) { // 评价页
          this.$store.commit('setAppraiseCommodity', appraiseItem)
          this.$router.push({
            path: 'appraise_commodity',
            query: {
              goodsId: appraiseItem.goodsId,
              orderId: appraiseItem.orderId,
              goodsIcon: appraiseItem.images
            }
          })
        } else { // 商品评价列表
          console.log('商品评价列表')
        }
      }
    },
    created () {
      this.$indicator.open({
        text: '加载中...',
        spinnerType: 'fading-circle'
      })
    },
    activated () {
//      let orderId = this.$route.query.orderId
      let params = {
        tp: 4,
        token: get_cookie('key'),
        orderId: this.$route.query.orderId,
        page: 1
      }
      console.log(params)
      recommend.getAppraiseList(params).then(resault => {
        this.$indicator.close()
        this.isLoading = false
        if (resault.status === 200 && resault.data.data !== null) {
          this.appraiseList = resault.data.data
//          this.nullShow = this.appraiseList.length
//          for (let i = 0; i < 3; i++) {
//            this.appraiseList.push(resault.data.data[i])
//          }
        } else {
          this.nullShow = true
        }
        console.log(this.appraiseList)
      }).catch(resault => {
        this.$indicator.close()
        this.isLoading = false
        console.log(resault)
      })
    }
  }
</script>

<style lang="scss">
  div.appraise-list {
    /*top: 44px;*/
    /*bottom: 44px;*/
    padding: 44px 0 0 0;
    /*overflow: scroll;*/
    position: relative;
    width: 100%;
    height: 100%;
    background-color: white;

    >ul {
      /*background-color: greenyellow;*/
      /*-webkit-overflow-scrolling: touch; !*兼容手机浏览器滑动*!*/
      overflow: scroll;
      width: 100%;
      height: auto;

      >li {
        margin-top: 10px;
        width: 100%;
        height: 100px;
        background-color: rgb(233, 233, 233);
      }
    }

    >p {
      height: 44px;
      line-height: 44px;
      color: rgb(133, 133, 133);
      font-size: 12px;
    }
  }
</style>
